[給心理人的前端網頁開發] 15 關卡二：網路問卷 - 用 Google App Script 當後端 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 15

Modern Web

給心理人的前端網頁開發系列第 15 篇

[給心理人的前端網頁開發] 15 關卡二：網路問卷 - 用 Google App Script 當後端

14th鐵人賽

ayugioh2003

2022-09-30 23:50:33

806 瀏覽

分享至

關卡二要做出一個網路問卷系統。昨天講了用 Google Sheet 當作資料庫，今天要用 Google App Script 當作是後端。今天會提到

後端具體來說在幹麻，API 是啥可以吃嗎
該怎麼用 Google App Script 當作後端
如何用 Postman 去測試後端是否能正常運作

一、後端是啥、API 又是啥

在前幾天有提到，後端其實就是前端與資料的橋樑。

當前端要最新的資料時，前端會像後端發出請求，接著後端會跟資料庫請求資料。資料庫收到請求後回傳響應給後端，最後後端再回傳響應給前端。

那前端跟後端具體來說，會如何交流交流？就是透過 API (Application Interface)，應用程式界面。以網頁程式來說，後端的 API 會以網址的方式呈現。

例如，想知道一個使用者的資料，後端開發者可以建立一個網址，讓前端開發者去呼叫取得資料。例如：https://random-data-api.com/api/v2/users。裡面有 first_name、last_name、email 等資料，前端開發者從 API 取得響應後，就可以自行取用這些資料。

{
	"last_name": "Williamson",
	"username": "santana.williamson",
	"email": "santana.williamson@email.com",
}

在 API 的功能設計中，會有新增、修改、刪除、查詢、取得資料等功能。而在關卡二：網路問卷中，我們只會用到新增功能。但為了教學說明，也會稍微提一下取得資料。

後端在開發 API 的功能時，不同的的功能類型，會對應到不同的寫法。例如查詢與取得會用 GET、新增會用到 POST、修改會用到 PUT or PATCH、刪除會用到 DELETE。這邊只要稍微知道有這觀念就好。

二、Google App Script

Google App Script 是 Google 提供的一個語言與服務，可以連動一些 Google 的服務，像是 Google Sheet。打開 Google App Script 編輯頁面的步驟： 擴充功能 -> App Script。詳細操作請參烤延伸閱讀。

以下程式碼會用註解解釋每個區塊的程式碼在做什麼

var ss = SpreadsheetApp.getActiveSpreadsheet(), // 抓取對應到的 Google Sheet
sheet1 = ss.getSheetByName("questionnaire"); // "sheet1" 改成你的工作表名稱

// 若前端發送 GET 請求給後端
// 則回傳響應文字 'Hello World
function doGet(e) {
  return ContentService.createTextOutput('Hello World');
}

// 若前端發送 POST 請求給後端
// 則回傳響應 write_data(para) 的執行結果
function doPost(e) {
  var para = JSON.parse(e.postData.contents); // 存放 post 所有傳送的資料
  return write_data(para);
}

function write_data(para) {
  var date = new Date() // 抓目前的日期與時間
  const {
    name,
    intro,
    sex,
    age,
    height,
    weight,
    why,
    note
  } = para // 從參數中取出問卷需要的欄位
  sheet1.appendRow([date, name, intro, sex, age, height, weight, why, note]); // 插入一列新的資料 
  return ContentService.createTextOutput("thanks for your help") // 回傳響應文字 thanks for your help
}

延伸資料